<template>
    <div class="search-list-container searchHeight">
        <div class="search-wrapper">
            <el-row style="padding-left:  20px; display: flex;justify-content: space-around;">
                <el-col :span="6">
                    <div class="statistics">
                        <i class="el-icon-s-platform icon"></i>
                        <div class="nav">
                            <span class="statisticsTitle">接入业务系统</span>
                            <div class="content">
                                <span class="name">共接入</span>
                                <span class="sum">{{ businessNum.totalCount }}</span>
                                <span class="uuit">个</span>
                            </div>
                            <div class="content">
                                <span class="name">今日新增</span>
                                <span class="sum totay">{{ businessNum.totalCountByToday }}</span>
                                <span class="uuit">个</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="statistics">
                        <i class="el-icon-office-building icon"></i>
                        <div class="nav">
                            <span class="statisticsTitle">接入单位</span>
                            <div class="content">
                                <span class="name">共接入</span>
                                <span class="sum">{{ uuitNum.totalCount }}</span>
                                <span class="uuit">个</span>
                            </div>
                            <div class="content">
                                <span class="name">今日新增</span>
                                <span class="sum totay">{{ uuitNum.totalCountByToday }}</span>
                                <span class="uuit">个</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="statistics">
                        <i class="el-icon-menu icon"></i>
                        <div class="nav">
                            <span class="statisticsTitle">物联专网终端</span>
                            <div class="content">
                                <span class="name">共接入</span>
                                <span class="sum">{{ terminal.totalCount }}</span>
                                <span class="uuit">个</span>
                            </div>
                            <div class="content">
                                <span class="name">今日新增</span>
                                <span class="sum totay">{{ terminal.totalCountByToday }}</span>
                                <span class="uuit">个</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="list-wrapper">
            <el-table ref="tables" v-loading="loading" width="100%" height="100%" :data="infoList"
                :cell-style="{ textAlign: 'center  !important' }"
                :header-cell-style="{ textAlign: 'center  !important' }">
                <el-table-column label="接入类型" prop="type" :required="true" width="350">
                </el-table-column>
                <el-table-column label="申请单位" prop="unit" :show-overflow-tooltip="true" />
                <el-table-column label=" 联系人" prop="contact" :show-overflow-tooltip="true" width="100">
                </el-table-column>
                <el-table-column label="联系电话" prop="phone" width="150" />
                <el-table-column label="单位地址邮编" prop="zipcode" :show-overflow-tooltip="true" width="200" />
                <el-table-column label="是否永久地址" prop="permanentaddress" :show-overflow-tooltip="true" width="150" />
            </el-table>
        </div>
        <!-- 分页器 -->
        <div :class="{ 'hidden': hidden }" class="pagination-container">
            <el-pagination :background="background" :current-page.sync="currentPage" :page-size="10"
                layout='total, sizes, prev, pager, next, jumper' :page-sizes="[10, 20, 30, 40, 50]"
                :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script>
import { getInstancesList, getList, totalStatistic } from "@/api/govern/index.js";
export default {
    data() {
        return {
            infoList: [],
            query: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            hidden: false,
            background: false,
            currentPage: 1,
            pagerCount: document.body.clientWidth < 992 ? 5 : 7,
            idList: [],
            instanceName: {
                // instanceName: "政务外网接入申请（"  //生产环境
                instanceName: "政务外网申请接入流程（"  //测试环境
            },
            loading: true,
            processDefinitionId: {
                // processDefinitionId: 'Process_1708674148894:1:000c9e2e-d21f-11ee-9733-fa163e282640' //生产环境
                processDefinitionId: 'Process_1697097285408:33:bc10417b-d453-11ee-b1ab-321c154710d5' //测试环境

            },
            businessNum: {},
            uuitNum: {},
            terminal: {}
        };
    },
    methods: {
        //获取列表
        async getList() {
            const result = await getInstancesList(this.instanceName)
            result.data.forEach(item => {
                if (item.processDefinitionId == this.processDefinitionId.processDefinitionId) {
                    this.idList.push({ 'definitionId': item.processDefinitionId, 'instanceId': item.id })
                }
            });
            const statisticsList = await totalStatistic(this.processDefinitionId)
            statisticsList.data.forEach(item => {
                if (item.id == 1) {
                    this.businessNum = item
                } else if (item.id == 2) {
                    this.uuitNum = item
                } else if (item.id == 3) {
                    this.terminal = item
                }
            })
            const query = {
                ...this.query,
                processDefAndInsLists: [
                    ...this.idList
                ]
            }
            const { data } = await getList(query)
            this.total = data.total
            this.infoList = data.records
            this.loading = false
        },
        //分页器
        handleSizeChange(val) {
            if (this.currentPage * val > this.total) {
                this.currentPage = 1
            }
            this.$emit('pagination', { page: this.currentPage, limit: val })
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        },
        handleCurrentChange(val) {
            this.query.pageNum = val
            this.getVPNAccList()
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        },
    },
    async mounted() {
        this.getList()
    },
};
</script>

<style lang="scss" scoped>
.statistics {
    color: #cce3ff;
    height: 90px;
    display: flex;
    border-radius: 30px;
    padding: 15px;
    border: #c9c9c9 1px solid;

    .icon {
        width: 30%;
        font-size: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav {
        padding-left: 10px;
        width: 60%;



        .content {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .sum {
                display: block;
                display: flex;
                justify-content: center;
                align-items: flex-end;

                color: rgb(6, 231, 234);
            }

            .totay {
                margin-left: -1rem;
            }
        }
    }
}

.search-list-container {
    height: 90%;
}
</style>